<template>
<div id="info">
    <NavBar>
     <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>

    <div slot="center">活动详情</div>
  </NavBar>
  <van-tabs v-model="active">
  <van-tab title="说明">
    <div class="introduce">
      <div class="name"><span>{{info.name}}</span></div>
      <van-cell-group>
          <van-cell title="开始时间" :value="info.begin_time|myformatdate" />
          <van-cell title="活动地点" :value="info.site" />
          <van-cell title="活动项目" :value="info.item" />
<!--          <van-cell title="目前报名人数" :value='[info.sign_num+" 人"]'/>-->
<!--          <van-cell title="报名收费" :value='[info.money+" 元"]' />-->
                  <van-cell title="目前报名人数" :value='info.sign_num'/>
<van-cell title="报名收费" :value=info.money />
  <van-cell title="比赛说明"  value="" :label="info.introduce" />
</van-cell-group>
    </div>
    <span class="info22">如要报名,填填写联系方式:</span>
    <van-form validate-first @failed="onFailed" class="info_box2">
  <!-- 通过 pattern 进行正则校验 -->

  <van-field
    v-model="phone"
    label="联系方式"
    name="联系方式"
    placeholder="如：手机：13121883304"
    error-message-align="right"
    :rules="[{ pattern, message: '手机号格式不正确' }]"
  />
    </van-form>
    <van-button type="primary" class="bottom_up" block @click="sign" :disabled="phone.trim().length===0||phone.length>20">我要报名</van-button>
    <van-dialog v-model="show" title="确认报名" show-cancel-button @confirm="suresign">

</van-dialog>
  </van-tab>
  <van-tab title="人员">
<div class="big_title">共{{people.length}}位同学报名</div>
    <van-cell-group>
<div class="people">
  <ul>
    <li v-for="item in people" class="li_item">
            <van-image round width="2.5rem" height="2.5rem"
                                         :src="'/api/'+item.img_header" fit="cover" class="header"
/>
      <span class="nickname">{{item.nickname}}</span>
      <span class="my-icon sex1" v-if="item.sex==0">&#xe63c;</span>
            <span class="my-icon sex2" v-else>&#xe63b;</span>
    <span class="phone"p>联系方式:{{item.contact.replace(/(\d{3})\d*(\d{4})/,"$1****$2")}}</span>
    </li>
  </ul>
</div>
</van-cell-group>
  </van-tab>
  <van-tab title="其他">
    <van-empty description="暂无内容" />
  </van-tab>
</van-tabs>
</div>
</template>

<script>
import NavBar from "@/components/common/NavBar/NavBar";
import {getactdetail} from "@/network/School/school";
import {Joinact} from "@/network/School/school";
import {peopleact} from "@/network/School/school";

export default {
name: "Border_Info",
  components:{NavBar},
  data(){
  return{
    active:0,
    info:{},
    show:false,
    phone:'',
    pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/,
    people:[]
  }
  },
  methods:{
        onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
  sign(){
    this.show=true
  },
    suresign(){
    this.show=false
      Joinact(this.$route.params.iid,this.phone).then(
          res=>{
           if(res.code===0){
             this.$toast({
               type:"success",
               message:'报名成功'
             })
          this.$router.push('/school')
           }
           else {
             this.$toast({
               type:'fail',
               message:res.errmsg
             })
           }

    },)},
  return_before(){
    history.go(-1)
  }
  },
  created() {
   getactdetail(this.$route.params.iid).then(
       res=>{
         this.info=res
       }
   )
    this.$emit('header',false)
    peopleact(this.$route.params.iid).then(
        res=>{
          console.log(res);
          this.people=res.info
        }
    )
  },
   filters:{
  myformatdate(inputTime){
	if(!inputTime && typeof inputTime !== 'number'){
		return '';
	}
	var localTime = '';
	inputTime = new Date(inputTime).getTime();
	const offset = (new Date()).getTimezoneOffset();
	localTime = (new Date(inputTime - offset * 60000)).toISOString();
	localTime = localTime.substr(0, localTime.lastIndexOf('.'));
	localTime = localTime.replace('T', ' ');
	return localTime
}}
}
</script>

<style scoped>
/deep/ .navbar{
  background-color: orange;
}
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
/deep/ .van-tabs__line{
  background-color: orange;
}
#info{
  background-color: #eeeeee;
  height:100vh;

}
.name{
  height: 50px;
  background-color: #fff;
  margin-top: 5px;
  color: black;
  font-size: 16px;
  position: relative;
}
.name span{
position: absolute;
  left: 15px;
  top: 15px;
}
.bottom_up{
  position: fixed;
  bottom: 0;
}
.info_box2{
  margin-top: 40px;
}
.info22{
  position: absolute;
  left: 16px;
  bottom: 55px;
  font-size: 14px;
  color: red;

}
.big_title{
  padding: 10px;
}
.li_item{
  position: relative;
  width: 100%;
  height: 80px;

  text-align: center;
  border-bottom: 1px solid #eeeeee;
}
.people{
   padding: 20px 20px;
}
.header{
  position: absolute;
  left: 0;
  top: 20px;
}
.nickname{
  position: absolute;
  left: 55px;
  top: 18px;
  color: black;
}
@font-face {
  font-family: 'my-icon';

  src: url('//at.alicdn.com/t/font_3196381_4sxv4wlj5t.woff2?t=1647150802903') format('woff2'),
       url('//at.alicdn.com/t/font_3196381_4sxv4wlj5t.woff?t=1647150802903') format('woff'),
       url('//at.alicdn.com/t/font_3196381_4sxv4wlj5t.ttf?t=1647150802903') format('truetype');
}
.my-icon {
  font-family: "my-icon" !important;
  font-size: 32px;
  /*font-style: normal;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*color: wheat;*/
}
.sex1{
  color: #13227a;

}
.sex2{
  color: deeppink;
}
.sex1,.sex2{
  position: absolute;
  right: 20px;
  bottom: 25px;
}
.phone{
  font-size: 12px;
  color: #a8a8a8;
  position: absolute;
  left: 55px;
  bottom: 20px;
}
</style>